<template>
  <zm-dialog
    :title="pTitle"
    :visible.sync="value"
    :before-close="dialogClose"
    append-to-body
    :close-on-click-modal="false"
    size="small"
  >
    <el-form ref="form" :model="form" label-width="140px" :rules="Rules">
      <el-form-item :label="typeName" prop="name">
        <zm-input
          v-model="form.name"
          :maxlength="setType === '6' ? 50 : 10"
          :placeholder="placeholder"
          class="w350"
        ></zm-input>
      </el-form-item>
      <el-form-item label="所属行业" prop="tradeType" v-if="setType === '6'">
        <!-- <zm-input
          v-model="form.tradeType"
          :maxlength="10"
          :placeholder="placeholder"
          class="w200"
        ></zm-input> -->
              <zm-data-select
          v-model="form.tradeType"
          k1="tradeType"
          class="w350"
        ></zm-data-select>
      </el-form-item>
      <el-form-item label="日常销售单总额" prop="rental" v-if="setType === '3'">
        <!-- 客户类型专用 -->
        <zm-input v-model="form.rental" placeholder="请填写" class="w200">
          <template slot="append">
          元
          </template>
        </zm-input>
      </el-form-item>
      <el-form-item label="移入公海设置" v-if="setType === '3'">
        <!-- 客户类型专用 -->
        <zm-switch
          v-model="form.daysStatus"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <div v-if="setType === '3' && form.daysStatus === '1'">
        <el-form-item
          v-for="(item, index) in form.customerPublicData"
          :key="index"
          :prop="'customerPublicData.' + index + '.days'"
          :rules="{
            required: true,
            message: '请填写天数',
            trigger: 'blur'
          }"
        >
          <!-- 客户类型专用 -->
          <span>{{ movePublicSeaText[index][0]}}</span>
          <zm-input
            v-model="item.days"
            center
            class="w140 mlr5"
            type="number"
            placeholder="请输入"
          >
            <template slot="append">
            天
            </template>
          </zm-input>
          <span>{{ movePublicSeaText[index][1] }}</span>
        </el-form-item>
      </div>
      <!-- 业务场景专用 -->
      <el-form-item label="备注说明" prop="remark" v-if="setType === '5'">
        <zm-input v-model="form.remark" placeholder="请填写" class="w350">
        </zm-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="tr">
      <zm-button @click="dialogClose" type="default">返回</zm-button>
      <zm-button @click="submit" type="primary">保存</zm-button>
    </div>
  </zm-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import { updateType, createType } from '@/api/src/customerSet'
export default {
  name: '',
  components: {},
  mixins: [dialogMixin],
  props: {
    setType: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      form: {
        name: '',
        rental: '',
        tradeType: '',
        daysStatus: '0', // 开关状态
        customerPublicData: [
          {
            id: '',
            customerType: '',
            days: '',
            daysType: '2',
            switchId: '1'
          },
          {
            id: '',
            customerType: '',
            days: '',
            daysType: '1',
            switchId: '1'
          },
          {
            id: '',
            customerType: '',
            days: '',
            daysType: '3',
            switchId: '2'
          }
        ]
      },

      Rules: {
        name: { required: true, message: '请填写名称', trigger: 'blur' },
        rental: { required: true, message: '请填写下限', trigger: 'blur' },
        remark: { required: true, message: '请填写备注说明', trigger: 'blur' },
        tradeType: { required: true, message: '请选择所属行业', trigger: 'change' }
      }
    }
  },
  computed: {
    pTitle () {
      const method = this.obj.id ? '编辑' : '新增'
      return method + this.getTypeName()
    },
    typeName () {
      return this.getTypeName()
    },
    placeholder () {
      return '请输入' + this.typeName + ',不超过' + (this.setType === '6' ? '50' : '10') + '个字'
    },
    movePublicSeaText () {
      let map = {
        '0': [
          '未产生过销售单客户，超过',
          '未有销售单产生的客户会被系统放回公海'
        ],
        '1': ['产生过销售单客户，超过', '未有新销售单产生会被系统移入公海；'],
        '2': ['客户超过', '未产生跟进记录的客户会被系统放回公海']
      }
      return map
    },
    daysRule () {
      let map = {
        '0': 'days1',
        '1': 'days2',
        '2': 'days3'
      }
      return map
    }
  },
  created () {
    this.init()
  },

  methods: {
    init () {
      if (this.obj.id) {
        this.form = JSON.parse(JSON.stringify(this.obj))
        console.log(this.form, '---------')
        // console.log(this.form.customerPublicData.length, '---------')
        if (this.form.customerPublicData) {
          if (this.form.daysStatus === '0' && this.form.customerPublicData.length === 0) {
            this.form.customerPublicData = [
              {
                id: '',
                customerType: '',
                days: '',
                daysType: '2',
                switchId: '1'
              },
              {
                id: '',
                customerType: '',
                days: '',
                daysType: '1',
                switchId: '1'
              },
              {
                id: '',
                customerType: '',
                days: '',
                daysType: '3',
                switchId: '2'
              }
            ]
          } else {
            let arr1 = []
            let arr2 = []
            let arr3 = []
            // 解决线上缺少daysType==='2'类型数据
            if (this.form.customerPublicData.length.toString() === '2') {
              this.form.customerPublicData.push({
                id: '',
                customerType: '',
                days: '',
                daysType: '2',
                switchId: '1'})
            }
            // 解决线上企业客户空数据
            if (this.form.customerPublicData.length.toString() === '0') {
              this.form.customerPublicData.push({
                id: '',
                customerType: '',
                days: '',
                daysType: '2',
                switchId: '1'
              },
              {
                id: '',
                customerType: '',
                days: '',
                daysType: '1',
                switchId: '1'
              },
              {
                id: '',
                customerType: '',
                days: '',
                daysType: '3',
                switchId: '2'
              })
            }
            this.form.customerPublicData.forEach(item => {
              item.daysType === '2' ? arr1.push(item) : item.daysType === '1' ? arr2.push(item) : arr3.push(item)
            })
            this.form.customerPublicData = [...arr1, ...arr2, ...arr3]
          }
        }
      }
    },
    getTypeName () {
      let tabTypeName
      switch (this.setType) {
        case '1':
          tabTypeName = '客户来源'
          break
        case '2':
          tabTypeName = '客户行业'
          break
        case '3':
          tabTypeName = '客户类型'
          break
        case '5':
          tabTypeName = '业务场景'
          break
        case '6':
          tabTypeName = '客户名称'
          break
        default:
          tabTypeName = ''
          break
      }
      return tabTypeName
    },
    async submit () {
      let _valid = false
      this.$refs.form.validate(valid => {
        _valid = valid
      })
      if (!_valid) return
      const _api = this.obj.id ? updateType : createType
      await _api({
        type: this.setType,
        id: this.obj.id,
        name: this.form.name,
        tradeType: this.form.tradeType,
        rental: this.form.rental,
        remark: this.form.remark,
        customerPublicData: this.form.customerPublicData,
        daysStatus: this.form.daysStatus
      })
      await this.$store.dispatch('setTypeList', 'forceFresh')
      this.$message.success('操作成功')
      this.$emit('after')
      this.dialogClose()
    }
  }
}
</script>

<style scoped lang="stylus"></style>
